<template>
    <div class="category">
        <mt-swipe :auto="4000">
            <mt-swipe-item v-for="(items, index) in lists" :key="index">
                <div class="item" v-for="(item, i) in items" :key="i">
                    <img :src="formatImage(item.image_hash)" alt="">
                    <span>{{item.name}}</span>
                </div>
            </mt-swipe-item>
        </mt-swipe>
    </div>
</template>
<script>
import {formatImage} from '../../modules/unit';
export default {
    data () {
        return {
            lists: []
        }
    },
    methods: {
        formatImage
    },
    created () {
      var that = this;
        var li = [];
        var lii = [];
        var ii = [];
        this.$axios.get('/api/restapi/shopping/v2/entries?latitude=34.807581&longitude=113.541443&templates[]=main_template&templates[]=favourable_template&templates[]=svip_template&terminal=h5')
        .then((res)=>{
            let data = res.data[0].entries;
            // this.lists = that.lodash.chunk(data, 10);
            var length = data.length
            li = data.slice(0, 10)
            lii = data.slice(10, length)
            ii = [li, lii]
            that.lists = ii
            // console.log(that.lists)
        });
    }
}
</script>
<style scoped>
.category {
    height: 40vw;
    font-size: 12px;
    background-color: floralwhite;
}
.item {
    width: 20vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    float: left;
}
.item img {
    width: 45px;
    height: 45px;
}
.item span {
    margin-top: 3px;
}
</style>
